<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="1000px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <div class="tabel_box">
        <el-table :data="tabelList" v-loading="loading" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.6)" element-loading-text="加载中" stripe border>
          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="用户昵称" align="center" prop="nickName" :show-overflow-tooltip="true" />
          <el-table-column label="手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
          <el-table-column label="评论内容" align="center" prop="content" :show-overflow-tooltip="true" />
          <el-table-column label="评论时间" align="center" prop="createTime" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="operation(scope.row,1)" v-if="scope.row.status==2">显示
              </el-button>
              <el-button size="mini" type="text" @click="operation(scope.row,2)" v-if="scope.row.status==1">隐藏
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList"></pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    kyyArticleCommentList,
    commentChangeStatus
  } from "@/api/kyyOfficialWebsite";
  export default {
    // dicts: ['asset_card_type'],
    name: "commentDialog",
    components: {

    },
    data() {
      return {
        loading: false,
        date: [],
        labelWidth: '90px',
        inputWidth: '200px',
        // 是否禁用表单
        disabled: false,
        // 弹出层标题
        title: "文章评论",
        // 是否显示弹出层
        visible: false,
        // 总条数
        total: 0,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          articleId: '',
        },
        //数组
        tabelList: [],
        statusType: [],
      };
    },
    created() {

    },
    methods: {
      /** 打开弹窗 */
      open(id) {
        this.queryParams.articleId = id
        this.getList()
        this.visible = true
      },
      // 取消按钮
      cancel() {
        this.visible = false;
      },
      //获取列表
      getList() {
        let data = {
          ...this.queryParams
        }
        kyyArticleCommentList(data).then(response => {
          this.tabelList = response.result.records
          this.total = response.result.total;
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      //操作显示隐藏
      operation(row, status) {
        let title = ''
        if (status == 1) {
          title = '是否显示？'
        } else {
          title = '是否隐藏？'
        }
        this.$confirm(title, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          commentChangeStatus(row.id).then((res) => {
            this.$message({
              message: "操作成功",
              type: "success",
              duration: 1500,
            });
            this.getList()
          });
        }).catch(() => {});
      },
    }
  };

</script>
<style scoped>
  .el-form-item {
    margin-bottom: 0;
  }

  .tabel_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .icon_yes {
    font-size: 30px;
    color: #67c23a;
  }

  .icon_no {
    font-size: 30px;
    color: #f56c6c;
  }

</style>
